import React, { useState, useRef, useEffect } from "react";
import "../assets/css/shouyeshouqi.css";
import { DownOutlined, UpOutlined } from "@ant-design/icons";
import { Pagination, Checkbox } from "antd";
import im from "../assets/images/形状.png";
import bian from "../assets/images/编辑按钮.png";

export default function Shouyeshouqi() {
  const [zhankaishouqi, genxinzhi] = useState(false);
  const [isMaskVisible, setIsMaskVisible] = useState(false);
  const [isBatchImportVisible, setIsBatchImportVisible] = useState(false);
  const [isClicked, setIsClicked] = useState(false);
  const [isDetailVisible, setIsDetailVisible] = useState(false);
  const [selectedItem, setSelectedItem] = useState(null);
  const [currentTab, setCurrentTab] = useState("客户详情"); // 默认显示客户详情 Tab
  const contentRef = useRef(null);
  const [currentPage, setCurrentPage] = useState(1);
  const pageSize = 10;

  const toggleMask = () => {
    setIsMaskVisible(!isMaskVisible);
  };
  const toggleStyle = () => {
    setIsClicked(!isClicked);
  };
  const toggleBatchImport = () => {
    setIsBatchImportVisible(!isBatchImportVisible);
  };

  const handleTabChange = (tab) => {
    setCurrentTab(tab);
  };
  const showDetails = (item) => {
    setSelectedItem(item);
    setIsDetailVisible(true);
  };

  const hideDetails = () => {
    setIsDetailVisible(false);
    setSelectedItem(null);
  };
  const [filters, setFilters] = useState({
    notStarted: false,
    ongoing: false,
    ended: false,
  });
  const data = [
    {
      name: "北京西天取经科技有限公司",
      notStarted: "-",
      ongoing: "是",
      ended: "-",
      maxArea: "是",
      daysStayed: 80,
    },
    // 更多数据可以添加在这里
  ];

  const paginatedData = data.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize
  );
  const handleFilterChange = (checkedValues, filterKey) => {
    setFilters({ ...filters, [filterKey]: checkedValues });
  };

  const handlePageChange = (page) => {
    setCurrentPage(page);
  };

  const shouzhan = () => {
    genxinzhi(!zhankaishouqi);
  };

  useEffect(() => {
    if (contentRef.current) {
      contentRef.current.style.height = zhankaishouqi
        ? "0px"
        : `${contentRef.current.scrollHeight}px`;
    }
  }, [zhankaishouqi]);

  return (
    <div className="zkehuguanshou">
      <div className="zshouzhoz">
        <input
          className="zshouzhosou"
          type="text"
          placeholder="请输入客户名称"
        />
        <div className="zshouzho">
          <div
            ref={contentRef}
            style={{
              height: "0px",
              overflow: "hidden",
              transition: "1s",
            }}
          >
            <div>
              <div className="zshouzhoyinerr">
                <div className="zshouzhoyinyiyyi">联系人姓名或手机号</div>
                <input className="zshouzhoyinyisousuio" type="text" />
              </div>
              <div className="zshouzhoyinyi">
                <div className="zshouzhoyinyiyyy">短期状态</div>
                <Checkbox
                  className="zshouzhoyinyixuan"
                  onChange={(e) =>
                    handleFilterChange(e.target.checked, "notStarted")
                  }
                  checked={filters.notStarted}
                >
                  已设置
                </Checkbox>
                <Checkbox
                  className="zshouzhoyinyixuan"
                  onChange={(e) =>
                    handleFilterChange(e.target.checked, "ongoing")
                  }
                  checked={filters.ongoing}
                >
                  未设置
                </Checkbox>
              </div>
            </div>
          </div>
          <div className="zshoudong">
            <div className="zshouzhoshou"></div>
            <div className="zshouzhozi" onClick={shouzhan}>
              {zhankaishouqi ? (
                <div>
                  <DownOutlined />
                  <span>更多筛选</span>
                </div>
              ) : (
                <div>
                  <UpOutlined />
                  <span>收起筛选</span>
                </div>
              )}
            </div>
          </div>
        </div>
        <div className="zshouzhoxia">
          <div className="zshouzhoxiazuo">查询</div>
          <div className="zshouzhoxiayou">重置</div>
        </div>
      </div>
      <div className="zshouxiaz">
        <div className="zshouxiatouuuy">
          <div className="zshouxiatouy">客户名称</div>
          <div className="zshouxiatouer">租住楼宇</div>
          <div className="zshouxiatouer">管理员</div>
          <div className="zshouxiatouer">管理员手机号</div>
          <div className="zshouxiatouer">管理人邮箱</div>
          <div className="zshouxiatouer">操作</div>
        </div>
                {paginatedData.map((item, index) => (
          <div
            className="zshouxiatouoooy"
            key={index}
            onClick={() => showDetails(item)}
          >
            <div className="zshouxiatouyy">{item.name}</div>
            <div className="zshouxiatoueer">{item.notStarted}</div>
            <div className="zshouxiatouersan">{item.ongoing}</div>
            <div className="zshouxiatouersi">{item.ended}</div>
            <div className="zshouxiatouerwu">{item.maxArea}</div>
            <div className="zshouxiatouerliu">{item.daysStayed}</div>
            <div className="zshouxiatouerqi">{item.daysLeft}</div>
          </div>
        ))}
        <Pagination
          className="zshoupagination"
          current={currentPage}
          pageSize={pageSize}
          total={data.length}
          onChange={handlePageChange}
        />
      </div>
    </div>
  );
}
